<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            position: absolute;
            background-color: rgb(150, 70, 70);
        }
    </style>
</head>

<body>

    <input type="button" value="生成圆形" id="one">
    <input type="button" value="生成正方形" id="two">
    <input type="button" value="生成三角形" id="three">
    <input type="button" value="生成长方形" id="four">


    <script src="../random_number.js"></script>
    <script>
        let x = innerWidth;
        let y = innerHeight;
        if (x > innerWidth) {
            x = innerWidth - 100
        }
        if (y > innerHeight) {
            y = innerHeight - 100
        }
        let bkc = `rgb(${random(255)}, ${random(255)},${random(255)})`

        one.onclick = function () {
            let circleObj = new Circle(random(x), random(y), `rgb(${random(255)}, ${random(255)},${random(255)})`,
                random(50)); // 圆形实例
            circleObj.render();
        }


        two.onclick = function () {
            console.log(x, y);
            let SquareeObj = new Square(random(x), random(y), `rgb(${random(255)}, ${random(255)},${random(255)})`,
                random(100));
            SquareeObj.render();
        }
        three.onclick = function () {
            console.log(random(x), random(y));
            let TriangleObj = new Triangle(random(x), random(y),
                `rgb(${random(255)}, ${random(255)},${random(255)})`, 0, random(100));
            TriangleObj.render();
        }
        four.onclick = function () {
            let recObj = new Rectangle(random(x), random(y), `rgb(${random(255)}, ${random(255)},${random(255)})`,
                random(100), random(100)); // 长方形实例
            recObj.render();
        }

        //原型
        class Graph {
            constructor(left, top, color) {
                this.left = left;
                this.top = top;
                this.color = color;
                this.node = null;
            }
            setPosition() {
                this.node.style.cssText = `
                position: absolute;
                left: ${this.left}px;
                top:${this.top}px;
                `
            }
            setColor() {
                this.node.style.cssText += `
                background-color: ${this.color};
                `
            }
            setSize() {
                this.node.style.cssText += `
                    width: ${this.width}px;
                    height: ${this.height}px;
                `;
            }
            render() {
                this.node = document.createElement('div');
                document.body.appendChild(this.node);
                this.setPosition(); // 设置位置
                this.setColor(); // 设置颜色
                this.setSize(); // 设置宽高
            }
        }

        //圆形
        class Circle extends Graph {
            constructor(left, top, color, radius) {
                super(left, top, color);
                this.radius = radius;
            }
            setSize() {
                this.node.style.cssText += `
                    width: ${this.radius * 2}px;
                    height: ${this.radius * 2}px;
                    border-radius: ${this.radius}px;
                `;

            }
        }



        //矩形
        class Rectangle extends Graph {
            constructor(left, top, color, width, height) {
                super(left, top, color);
                this.width = width;
                this.height = height;
            }

        }
        let recObj = new Rectangle(100, 50, 'pink', 100, 80); // 长方形实例
        // recObj.render();

        //正方形
        class Square extends Rectangle {
            constructor(left, top, color, length) {
                super(left, top, color);
                this.width = length;
                this.height = length;
            }
        }
        let SquareeObj = new Square(150, 50, 'blue', 100);
        // SquareeObj.render();

        //三角形
        class Triangle extends Graph {
            constructor(left, top, color, height, bottom) {
                super(left, top, color);
                this.height = height;
                this.width = height;
                this.bottom = bottom;

            }
            setSize() {
                this.node.style.cssText = `
                position: absolute;
                left: ${this.left}px;
                top:${this.top}px;
                display: block;
                width: 0px;
                height: ${this.height}px;
                border-top: ${this.bottom}px solid transparent;
                border-right: ${this.bottom}px solid transparent;
                border-bottom: ${this.bottom}px solid ${this.color};
                border-left: ${this.bottom}px solid transparent;
                `
            }
        }
        // let TriangleObj = new Triangle(300, 50, 'pink', 10, 40);
        // TriangleObj.render();
    </script>
</body>

</html>